<nz-card>
  <p class="info-title">
    基础信息
    <span class="sub-title-tip mcolor-red p-l-10">
      (当存在多个进行中的活动前端展示最新的那个，根据开始时间判断)
    </span>
  </p>

  <div class="info-control-wrap p-b-10">
    <nz-form-item>
      <nz-form-label [nzFlex]="formWidth" nzRequired>抽奖限制</nz-form-label>
      <nz-form-control nzFlex="auto">
        <nz-radio-group
          [(ngModel)]="formParams.raffleLimit"
          (ngModelChange)="drawTypeChange($event)">
          <label nz-radio [nzValue]="0">需要登录</label>
          <label nz-radio [nzValue]="1">不需要登录</label>
        </nz-radio-group>
      </nz-form-control>
    </nz-form-item>

    <nz-form-item>
      <nz-form-label [nzFlex]="formWidth" nzRequired>活动名称</nz-form-label>
      <nz-form-control nzFlex="424px">
        <input
          nz-input
          maxlength="20"
          placeholder="请输入活动名称"
          [(ngModel)]="formParams.activityName"
        />
      </nz-form-control>
    </nz-form-item>

    <nz-form-item>
      <nz-form-label [nzFlex]="formWidth" nzRequired>有效时间</nz-form-label>
      <nz-form-control nzFlex="auto">
        <nz-date-picker
          [nzDisabledDate]="disabledStartDate"
          nzShowTime
          nzFormat="yyyy-MM-dd HH:mm:ss"
          [(ngModel)]="formParams.beginTime"
          nzPlaceHolder="请选择开始时间"
          (ngModelChange)="timeChange($event, 'beginTime')">
        </nz-date-picker>

        <nz-date-picker
          #endDatePicker
          class="m-l-10"
          [nzDisabledDate]="disabledEndDate"
          nzShowTime
          nzFormat="yyyy-MM-dd HH:mm:ss"
          [(ngModel)]="formParams.endTime"
          nzPlaceHolder="请选择结束时间"
          (ngModelChange)="timeChange($event, 'endTime')">
        </nz-date-picker>
      </nz-form-control>
    </nz-form-item>

    <nz-form-item>
      <nz-form-label [nzFlex]="formWidth">备注</nz-form-label>
      <nz-form-control nzFlex="424px">
        <nz-textarea-count [nzMaxCharacterCount]="100">
          <textarea
            rows="4"
            nz-input
            maxlength="100"
            placeholder="仅内部可见"
            [(ngModel)]="formParams.bak"
          ></textarea>
        </nz-textarea-count>
      </nz-form-control>
    </nz-form-item>
  </div>

  <nz-divider></nz-divider>

  <p class="info-title">
    奖品配置
  </p>

  <div class="info-control-wrap">
    <div nz-row class="table-config-wrap">
      <nz-table
        nz-col
        nzSpan="16"
        #basicTable
        nzSize="small"
        nzBordered
        [nzShowPagination]="false"
        [nzData]="tableConfigData">
        <thead>
          <tr>
            <th nzAlign="center">序号</th>
            <th nzAlign="center">奖品类型</th>
            <th nzAlign="center">奖品名称</th>
            <th nzAlign="center">中奖提示语</th>
            <th nzAlign="center">图标</th>
            <th nzAlign="center">奖品参数</th>
            <th nzAlign="center">中奖概率%</th>
            <th nzAlign="center">每日发放总数量</th>
            <th nzAlign="center">操作</th>
          </tr>
        </thead>
        <tbody cdkDropList (cdkDropListDropped)="drop($event)">
          <tr *ngFor="let data of tableConfigData; let index = index;" cdkDrag>
            <!-- 序号 -->
            <td nzAlign="center">{{ index + 1 }}</td>
            <!-- 奖品类型 -->
            <td nzAlign="left">
              <div class="align-center-td">
                <nz-select
                  style="min-width: 150px;"
                  [nzBorderless]="false"
                  nzPlaceHolder="请选择奖品类型"
                  [(ngModel)]="data.type"
                  [nzDisabled]="data.type === 4"
                  (ngModelChange)="prizeTypeChange($event, index)">
                  <nz-option
                    *ngFor="let option of prizeTypeOptions"
                    [nzValue]="option.value"
                    [nzLabel]="option.label"
                    [nzDisabled]="option.value === 4 || (formParams.raffleLimit === 1 && [2, 3].includes(option.value))"
                  ></nz-option>
                </nz-select>
              </div>
            </td>
            <!-- 奖品名称 -->
            <td nzAlign="center">
              <nz-input-group class="ipt-fix-span" [nzSuffix]="data.name.length + '/7'">
                <input
                  type="text"
                  nz-input
                  maxlength="7"
                  placeholder="请输入奖品名称"
                  [(ngModel)]="data.name"
                />
              </nz-input-group>
            </td>
            <!-- 中奖提示语 -->
            <td nzAlign="center">
              <nz-textarea-count class="textarea-fix-span" [nzMaxCharacterCount]="20">
                <textarea
                  rows="2"
                  nz-input
                  maxlength="20"
                  placeholder="请输入中奖提示语"
                  [(ngModel)]="data.clew"
                ></textarea>
              </nz-textarea-count>
            </td>
            <!-- 图标 -->
            <td nzAlign="center">
              <div class="upload-icon-td">
                <zdy-upload
                  [uploadSize]="48"
                  [(ngModel)]="data.imgUrl"
                ></zdy-upload>
              </div>
            </td>
            <!-- 奖品参数 -->
            <td nzAlign="center">
              <ng-container *ngIf="data.type === 1; else elseCsTemplate">
                <nz-input-number
                  style="width: 100%;"
                  [nzMin]="0"
                  [nzStep]="1"
                  [nzPrecision]="0"
                  nzPlaceHolder="请输入加价金额"
                  [(ngModel)]="data.price"
                ></nz-input-number>
              </ng-container>
              <ng-template #elseCsTemplate>
                <input
                  nz-input
                  placeholder="请输入券ID"
                  [disabled]="data.type === 4"
                  [(ngModel)]="data.couponNo"
                />
              </ng-template>
            </td>
            <!-- 中奖概率% -->
            <td nzAlign="center">
              <div class="align-center-td">
                <nz-input-number
                  [nzMin]="0"
                  [nzStep]="1"
                  [nzPrecision]="0"
                  nzPlaceHolder="请输入"
                  [nzDisabled]="data.type === 4"
                  [(ngModel)]="data.probability"
                ></nz-input-number>
                <span style="color: #C0C4CC;" class="m-l-2">%</span>
              </div>
            </td>
            <!-- 每日发放总数量 -->
            <td nzAlign="center">
              <ng-container *ngIf="data.type === 4; else elseZsTemplate">
                <span class="mcolor-red">不限</span>
              </ng-container>
              <ng-template #elseZsTemplate>
                <nz-input-number
                  [nzMin]="0"
                  [nzStep]="1"
                  [nzPrecision]="0"
                  nzPlaceHolder="请输入"
                  [(ngModel)]="data.stock"
                ></nz-input-number>
              </ng-template>
            </td>
            <!-- 操作 -->
            <td nzAlign="center">
              <a
                *ngIf="data.type !== 4"
                nz-button
                nzType="link"
                nzDanger
                nzSize="small"
                class="m-r-5"
                nz-popconfirm
                nzPopconfirmTitle="确认清除?"
                (nzOnConfirm)="clearItemData(data, index)">
                清除
              </a>
              <button
                nz-button
                nzType="link"
                nzSize="small">
                <i nz-icon nzType="drag" nzTheme="outline" cdkDragHandle></i>
              </button>
            </td>
          </tr>
        </tbody>
      </nz-table>

      <div nz-col nzSpan="8" class="p-l-15">
        <div class="square-wrap">
          <p class="start-p">开始抽奖</p>
          <ul class="square-ul">
            <li *ngFor="let item of tableConfigData; let index = index;">
              <img
                nz-image
                width="50px"
                height="50px"
                [nzSrc]="item.imgUrl"
                [nzFallback]="fallback"
              />
              <span>{{ item.name }}</span>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</nz-card>

<nz-card class="m-t-4">
  <div nz-row nzJustify="center">
    <button nz-button nzType="primary" [nzLoading]="submitLoading" (click)="submitFormData()">保存</button>
    <button nz-button nzType="default" class="m-l-10" (click)="routeBack()">返回</button>
  </div>
</nz-card>